import React, { Component } from 'react'
import { connect } from 'react-redux'
import {ADD_TODO} from '../store/types'
class Header extends Component {

    state = {
        title: ''
    }

    // 操作提交用的
    add(){
        const obj = {
            isSelect: false,
            id: 'item-' + String(Math.random()),
            title: this.state.title
        }

        this.props.addItem(obj)
        
        this.setState({
            title: ''
        })
    }

  render() {
    return (
      <div className='header'>
        <input 
        type="text" 
        value={this.state.title} 
        onKeyUp={(e)=>{
            if(e.key === 'Enter'){
               this.add()
            }
        }} 
        onChange={(e)=>{
            this.setState({
                title: e.target.value
            })
        }} />
        <button onClick={()=>{
            // 收集需要提交的内容，需要有是否选中，标题，id
            this.add()            
        }}>提交</button>
      </div>
    )
  }
}

export default connect(null, (dispatch)=>{
    return {
        addItem(obj){
            // console.log(obj);
            // 将内容添加到全局状态中
            dispatch({type: ADD_TODO, payload: obj})
        }
    }
})(Header)